import { memo } from "react"
import { Link } from "react-router-dom"
import CommentList from "./CommentList"

const CommentContainer = (props) => {
    const { currentUser ,comments ,slug} = props
    if (!currentUser) {
        return (
            <div className="col-xs-12 col-md-8 offset-md-2">
                <p>
                    <Link to='/login'> 登录 </Link>
                    &nbsp; or &nbsp;
                    <Link to='/regist'> 注册 </Link>
                </p>
                <CommentList comments={comments} slug={slug} currentUser={currentUser}/>
            </div>
        )
    } else {
        return (
            <div className="col-xs-12 col-md-8 offset-md-2">
                <form className="card comment-form">
                    <div className="card-block">
                        <textarea className="form-control" placeholder="添加评论..." rows={3}>

                        </textarea>
                    </div>
                    <div className="card-footer">
                        <img style={{width:30,height:30}} className="comment-author-img" src={currentUser.avatar || 'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg'} alt='currentUser' />
                        <button style={{float:"right"}}  className='btn btn-sm btn-primary' type="submit">提交</button>
                    </div>
                </form>
                <CommentList comments={comments} slug={slug} currentUser={currentUser}/>
            </div>
        )
    }
}

export default memo(CommentContainer)